<template>
  <div>
    <div
        style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;
      "
    >
      产品类目
    </div>
    <!-- <van-search
      v-model="searchContent"
      placeholder="请输入搜索关键词"
      @search="search"
    /> -->
    <van-search
        v-model="searchContent"
        show-action
        placeholder="请输入搜索关键词"
        @search="search"
        @cancel="onCancel"
    />
<!--    这段代码是使用Vant UI组件库中的`van-search`组件来创建一个搜索框。-->

<!--    - `v-model="searchContent"`：将搜索框的值与名为`searchContent`的变量进行双向绑定，-->
<!--    即当用户在搜索框中输入内容时，`searchContent`变量会自动更新为当前输入的内容；反之，当`searchContent`变量的值发生变化时，搜索框的内容也会相应地更新。-->
<!--    - `show-action`：表示显示搜索框右侧的搜索按钮和取消按钮。-->
<!--    - `placeholder="请输入搜索关键词"`：设置搜索框的占位符文本为"请输入搜索关键词"，当搜索框为空时会显示该文本提示用户输入。-->
<!--    - `@search="search"`：当用户点击搜索按钮或按下回车键时，触发名为`search`的方法，用于执行搜索操作。-->
<!--    - `@cancel="onCancel"`：当用户点击取消按钮时，触发名为`onCancel`的方法，用于执行取消搜索操作。-->

<!--    综上所述，这段代码创建了一个带有搜索功能的搜索框，用户可以在其中输入关键词进行搜索，-->
<!--    并可以通过点击搜索按钮或取消按钮来执行相应的操作。-->

    <div
        v-if="newP.obj && newP.obj.length > 0"
        style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
          v-for="(i, index) in newP.obj"
          :key="index"
          style="
          width: calc((100vw - 160px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
          border: 1px solid #e3e3e3;
        "
      >
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
        </div>
<!--        这段代码是使用Vue.js框架编写的。它创建了一个包含多个子元素的容器，每个子元素都是一个卡片样式的组件。-->

<!--        - `v-if="newP.obj && newP.obj.length > 0"`：这是一个条件渲染指令，只有当`newP.obj`存在且其长度大于0时，才会显示该容器及其子元素。-->
<!--        - `style="flex-wrap: wrap; padding: 20px; display: flex; justify-content: space-between;"`：这是容器的样式设置，包括将子元素设置为可换行排列、添加内边距、设置弹性布局和水平对齐方式。-->
<!--        - `v-for="(i, index) in newP.obj" :key="index"`：这是一个循环指令，用于遍历`newP.obj`数组中的每个元素，并将其赋值给变量`i`和`index`。同时，通过设置`:key="index"`来为每个子元素指定唯一的键值，以便Vue.js能够正确地追踪它们的变化。-->
<!--        - `style="width: calc((100vw - 160px) / 2); margin-right: 10px; margin-bottom: 10px; border-radius: 15px; text-align: center; padding: 20px; border: 1px solid #e3e3e3;"`：这是子元素的样式设置，包括宽度、外边距、边框圆角、文本居中、内边距和边框样式等。-->
<!--        - `<div><img : style="border-radius: 15px; width: 100%" /></div>`：这是一个图片组件，它的样式设置包括边框圆角和宽度。-->
<!--        - `<div><span>{{ i.name }}</span></div>`：这是一个文本组件，用于显示当前循环到的元素的`name`属性值。-->


        <div
            style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >

          <span>{{ i.unit }}{{ i.price }}</span>
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>
    <div
        v-else
        style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
          v-for="(i, index) in categorys"
          :key="index"
          @click="gotoCategoryDetails(i)"
          style="
          width: calc((100vw - 150px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
        "
          :style="{
          border: `1px solid ${i.color}`,
          backgroundColor: i.color,
          backgroundSize: cover,
        }"
      >
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
        </div>
<!--        这段代码是使用Vue.js框架编写的。它创建了一个包含多个子元素的容器，每个子元素都是一个卡片样式的组件。-->

<!--        - `v-else`：这是一个条件渲染指令，只有当前面的条件不满足时才会显示该容器及其子元素。-->
<!--        - `style="flex-wrap: wrap; padding: 20px; display: flex; justify-content: space-between;"`：这是容器的样式设置，包括将子元素设置为可换行排列、添加内边距、设置弹性布局和水平对齐方式。-->
<!--        - `v-for="(i, index) in categorys" :key="index"`：这是一个循环指令，用于遍历`categorys`数组中的每个元素，并将其赋值给变量`i`和`index`。同时，通过设置`:key="index"`来为每个子元素指定唯一的键值，以便Vue.js能够正确地追踪它们的变化。-->
<!--        - `@click="gotoCategoryDetails(i)"`：这是一个点击事件监听器，当用户点击该子元素时，会触发名为`gotoCategoryDetails`的方法，并将当前循环到的元素作为参数传递给该方法。-->
<!--        - `style="width: calc((100vw - 150px) / 2); margin-right: 10px; margin-bottom: 10px; border-radius: 15px; text-align: center; padding: 20px;"`：这是子元素的样式设置，包括宽度、外边距、边框圆角、文本居中和内边距等。-->
<!--        - `:style="{border: `1px solid ${i.color}`, backgroundColor: i.color, backgroundSize: cover,}"`：这是子元素的动态样式设置，根据当前循环到的元素的`color`属性值来设置边框颜色、背景颜色和背景大小等。-->
<!--        - `<div><img : style="border-radius: 15px; width: 100%" /></div>`：这是一个图片组件，它的样式设置包括边框圆角和宽度。-->
<!--        - `<div><span>{{ i.name }}</span></div>`：这是一个文本组件，用于显示当前循环到的元素的`name`属性值。-->
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";


const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
// 这段代码是使用Vue.js框架编写的。它导入了一些模块和函数，并定义了一些变量。
//
// 1. `import { ref, reactive } from "vue";`：从"vue"模块中导入了`ref`和`reactive`两个函数。`ref`用于创建一个响应式的数据对象，`reactive`用于创建一个响应式的对象。
//
// 2. `import { useRouter } from "vue-router";`：从"vue-router"模块中导入了`useRouter`函数。`useRouter`用于在Vue组件中获取路由实例。
//
// 3. `import { showDialog } from "vant";`：从"vant"模块中导入了`showDialog`函数。`showDialog`用于显示一个对话框。
//
// 4. `import { userStore } from "../store/piniaStore";`：从"../store/piniaStore"模块中导入了`userStore`函数。`userStore`可能是一个Pinia store，用于管理用户状态。
//
// 5. `import { myMixin } from "../mixin.js";`：从"../mixin.js"模块中导入了`myMixin`对象。`myMixin`可能是一个包含一些混入方法的对象。
//
// 6. `const { errorMsgBox, successMsgBox } = myMixin();`：从`myMixin`对象中解构出`errorMsgBox`和`successMsgBox`两个方法。这两个方法可能用于显示错误消息框和成功消息框。
//
// 7. `const useUserStore = userStore();`：调用`userStore`函数并将返回值赋给`useUserStore`变量。这个变量可能是一个Pinia store实例，用于访问和管理用户状态。
//
// 8. `const router = useRouter();`：调用`useRouter`函数并将返回值赋给`router`变量。这个变量可能是一个路由实例，用于在Vue组件中进行路由跳转等操作。

let categorys = useUserStore.categorys;
let products = useUserStore.products;
let cartList = useUserStore.cartList;

let newP = reactive({ obj: [] });

let searchContent = ref("");
// 这段代码是使用Vue.js框架编写的。它定义了一些变量和对象，并从`useUserStore`中获取了一些数据。
//
// 1. `let categorys = useUserStore.categorys;`：从`useUserStore`中获取`categorys`属性的值，并将其赋给`categorys`变量。`categorys`可能是一个包含商品分类信息的数组。
//
// 2. `let products = useUserStore.products;`：从`useUserStore`中获取`products`属性的值，并将其赋给`products`变量。`products`可能是一个包含商品信息的数组。
//
// 3. `let cartList = useUserStore.cartList;`：从`useUserStore`中获取`cartList`属性的值，并将其赋给`cartList`变量。`cartList`可能是一个包含购物车信息的对象或数组。
//
// 4. `let newP = reactive({ obj: [] });`：创建一个响应式对象`newP`，其中包含一个名为`obj`的属性，其初始值为空数组。`reactive`函数用于将普通对象转换为响应式对象，以便在数据发生变化时自动更新视图。
//
// 5. `let searchContent = ref("");`：创建一个响应式引用`searchContent`，并将其初始值设置为空字符串。`ref`函数用于创建一个响应式引用，以便在数据发生变化时自动更新视图。

function gotoCategoryDetails(i) {
  window.localStorage.setItem("currentCategory", JSON.stringify(i));
  router.push("categoryDetails");
}
//综合搜索
function search(val) {
  newP.obj = [];
  products.forEach((element) => {
    if (element.name.indexOf(val) != -1) {
      newP.obj.push(element);
    }
  });
}

// 这段代码是使用Vue.js框架编写的。它定义了两个函数：`gotoCategoryDetails`和`search`。
//
// 1. `gotoCategoryDetails(i)`函数：这个函数接收一个参数`i`，表示要跳转到的分类详情页面的标识。函数内部首先将`i`转换为JSON字符串并存储到浏览器的本地存储中，然后通过`router.push`方法跳转到名为"categoryDetails"的路由。
//
// 2. `search(val)`函数：这个函数接收一个参数`val`，表示要搜索的关键词。函数内部首先清空`newP.obj`数组，然后遍历`products`数组，如果某个元素的`name`属性包含`val`
// ，则将该元素添加到`newP.obj`数组中。这个函数的作用是根据关键词搜索商品，并将搜索结果存储在`newP.obj`数组中。
function addCart(i, index) {
  if (!i.num) {
    i.num = 1;
  }
  document.querySelectorAll(".plus-product")[index].classList.add("scale");
  setTimeout(() => {
    document.querySelectorAll(".plus-product")[index].classList.remove("scale");
  }, 300);

  i.totalPrice = i.price;

  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == i.id) {
      cartProduct.num += 1;
      cartProduct.totalPrice = cartProduct.num * i.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(i);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}
// 这段代码是一个名为`addCart`的函数，它接收两个参数：`i`和`index`。这个函数的主要功能是将商品添加到购物车中。
//
// 1. 首先，检查`i`对象是否有`num`属性，如果没有，则将其设置为1。
// 2. 然后，为页面上的某个元素（通过`.plus-product`类名和`index`参数选择）添加一个名为`scale`的类，使其产生缩放效果。300毫秒后，移除该类，恢复原始状态。
// 3. 将`i`对象的`totalPrice`属性设置为其`price`属性的值。
// 4. 使用`some`方法遍历`cartList`数组，检查是否已经存在具有相同`id`的商品。如果存在，则将该商品的`num`属性加1，并更新其`totalPrice`属性。如果不存在，则将`i`对象添加到`cartList`数组中。
// 5. 调用`useUserStore.calcluteCart()`方法重新计算购物车中的商品总价。
// 6. 最后，显示一个成功消息框，提示用户商品已成功添加到购物车。
</script>
